<template>

 

  <div class="loginCardContainer">
  
  <div class="loginCard">
    <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol"  style="margin-top:45%;margin-left:3%">
      <a-form-item
        label="邮箱"
    has-feedback
    :validateStatus="type1"
    :help="message1"
      >
        <a-input
          v-model:value="user.email"
      placeholder="请输入邮箱"
      @change="checkEmail"
        />
      </a-form-item>

      <a-form-item
        label="密码"
        has-feedback
        :validate-status="type2"
        :help="message2"
      >
        <a-tooltip placement="topLeft">
          <template #title>请输入密码</template>
          <a-input-password
            v-model:value="user.user_pwd"
            @change="checkPwd"
            placeholder="请输入密码"
          />
        </a-tooltip>
      </a-form-item>
      <div style="display:flex;justify-content:space-between;width:70%;margin-left:17%;margin-top:-3%;">
        <a href="/security/register">还没有账户？需要注册</a>
      <a @click="openForget">忘记密码</a>
      </div>
      
    </a-form>
    <a-modal v-model:visible="visible1" title="忘记密码" @ok="gotoForgetPWd">
      <a-form-item
        label="账户id"
        has-feedback
        :validateStatus="type3"
        :help="message3"
      >
        <a-input
          v-model:value="forgetUser.user_id"
          placeholder="请输入账户id"
          @change="checkId2"
        />
      </a-form-item>
    </a-modal>

    <a-button type="primary" @click="login" style="margin-left: 19%;margin-top:5%">
      登录
    </a-button>
  </div>
  <div style="width:70%">
    <img src="/bc.jpg" alt="" style="width:100%">
  </div>
</div>
</template>

<script setup>
////////////////////////////////////////////
import { reactive, ref } from "vue";
import { post, setLocalToken } from "@/common";
import { useRouter } from "vue-router";
import { get } from "@/common";
import { message } from "ant-design-vue";
////////////////////////////////////////////
const user = reactive({
  email: "",
  user_pwd: "",
});

const router = useRouter();

const message1 = ref("");

const type1 = ref("");

const type2 = ref("error");

const message2 = ref("密码不得少于6位");

const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 17,
};


////////////////////////////////////////////
const checkEmail=()=>{
   if(user.email.indexOf("@") != -1 && (user.email.indexOf(".com") != -1 || user.email.indexOf(".cn") != -1)){
      type1.value = "success";
      message1.value = "";
      buttonStatus1.value=false;
   }else{
      type1.value = "error";
      message1.value = "请输入正确的邮箱";
      buttonStatus1.value=true;
   }
};

const checkPwd = () => {
  if (user.user_pwd.length >= 6) {
    type2.value = "success";
    message2.value = "";
  } else {
    type2.value = "error";
    message2.value = "密码不得少于6位";
  }
};

const login = () => {
  post("/security/loginByMail", user).then((res) => {
    if (res.data) {
      const token = res.data;
      setLocalToken(token);

      const web = res.message;

      router.push({path: web });
    } else {
      message.error(res.message);
    }
  });
};
</script>

<style>
.loginCardContainer{
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
}
.loginCard{
  width: 30%;
}
</style>